<template>
  <div class="body">
    <van-sticky>
      <van-search
        v-model="search"
        background="#3DCEB9"
        shape="round"
        input-align="center"
        placeholder="搜索商品"
        v-on:search="onSearch"
      />
    </van-sticky>
    <div class="swipe">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="(item,index) of data.banner" :key="index">
          <van-image use-loading-slot class="grid-pic" :src="item.pic">
              <van-loading
                slot="loading"
                type="spinner"
                size="20"
                vertical
              />
            </van-image>
        </van-swipe-item>
      </van-swipe>
    </div>
    <div class="grid">
        <van-grid column-num="5" :border="false" square>
          <van-grid-item icon="photo-o" v-for="(item,index) of data.categroy" :key="index" :to="{path:'/classGoods',query:{id:item.id}}">
            <van-image use-loading-slot class="grid-pic" :src="item.pic">
              <van-loading
                slot="loading"
                type="spinner"
                size="20"
                vertical
              />
            </van-image>
            <p class="grid-title">{{item.name}}</p>
          </van-grid-item>
        </van-grid>
    </div>
    <van-cell-group v-if="data.is_hot">
      <van-cell title="热门爆品" value="更多" is-link link-type="navigateTo" url="/"/>
    </van-cell-group>
    <van-card
      v-for="(item,index) of data.is_hot" :key="index"
      :num="`已售${item.sales}件`"
      :price="item.price"
      :origin-price="item.ot_price"
      :desc="item.info"
      :title="item.name"
      :thumb="$store.getters.base_url+item.image"
      :thumb-link="'/goodInfo?id='+item.id"
    />
    <van-cell-group v-if="data.is_new">
      <van-cell title="新品推荐" value="更多" is-link link-type="navigateTo" url="/"/>
    </van-cell-group>
    <van-grid column-num="2">
  <van-grid-item use-slot v-for="(item,index) of data.is_new" :key="index" square>
    <van-image use-loading-slot class="grid-pic" :src="$store.getters.base_url+item.image" width="150" height="100">
      <van-loading
        slot="loading"
        type="spinner"
        size="20"
        vertical
      />
    </van-image> 
    <p class="new-title">{{item.store_name}}</p>
    <div class="new-info">
      <div>
        <p class="my-price">￥{{item.price}}</p>
        <p class="ot-price">￥{{item.ot_price}}</p>
      </div>
      <p class="iconfont icon-qiang"></p>
    </div>
  </van-grid-item>
</van-grid>
  </div>
</template>
<script>
import {index} from '../ajax'
export default {
  name: 'index',
  data () {
    return {
       data:{},
       search:'',
       color:'#3DCEB9'
    }
  },
  created(){
    const data = {
        admin_id:this.$route.query.admin_id?this.$route.query.admin_id:this.$store.getters.admin_id
    }
    index(data).then(res=>{
      this.data = res;
    })
  },
  methods:{
    onSearch(e){
      if(e){
        this.$router.push({path:'/productList',query:{search:e}})
      }
    }
  }
}
</script>
<style scoped lang="scss">
$red:#FF5245;
$gray:#9B9B9B;
$green:#3DCEB9;
.body{
  margin-bottom:3rem;
  .swipe{
    width: 100%;
    height:10rem;
    .van-image{
      width: 100%;
      height:10rem;
    }
  }
  .grid{
    background: #f2f2f2;
    >>> .van-grid-item__content{
      background: #f2f2f2;
    }
    .grid-pic{
      width: 100%;
      height: 3rem;
    }
    .grid-title{
      font-size: 0.9rem;
    }
  }
  .van-grid-item{
    width: 50%;
  }
  .new-title{
    width: 80%;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 2rem;
    font-size: 0.9rem;
    font-weight: bolder;
    white-space: nowrap;
    word-break: break-all;
  }
  .new-info{
    width:80%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .my-price{
      color:$red;
      font-weight: 700;
      font-size: 1rem;
    }
    .ot-price{
      font-size: 0.8rem;
      color: $gray;
      text-decoration: line-through;
    }
    .icon-qiang{
      color: $red;
      font-size: 2rem;
    }
  }
}
</style>
